<!--
 * @Description: 
 * @Date: 2023-12-20 16:31:49
 * @LastEditTime: 2024-04-24 09:21:38
-->
<template>
  <div class="dbxxStatistics">
    <div class="dbxxStatistics-chunk">
      <el-row :gutter="40">
        <el-col :sm="24" :md="6" :lg="6">
          <div class="chunk">
            <i class="el-icon-s-order"></i>
            <div>
              <CountTo :startVal="0" :endVal="amount" :duration="2000" />
              <span>代表数量</span>
            </div>
          </div>
        </el-col>
        <el-col :sm="24" :md="6" :lg="6">
          <div class="chunk">
            <i class="el-icon-s-data"></i>
            <div>
              <CountTo :startVal="0" :endVal="allNumber" :duration="2000" />
              <span>当届总数</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="dbxxStatistics-chart">
      <el-row :gutter="40" style="width: 100%">
        <el-col :sm="24" :md="12" :lg="12">
          <div class="chunk-border">
            <p>历届代表人数</p>
            <LineChartVue
              style="flex: 1"
              :chartData="dbxxLevelList"
            ></LineChartVue>
          </div>
        </el-col>
        <el-col :sm="24" :md="12" :lg="12">
          <div class="chunk-border">
            <p>性别分布</p>
            <pieChart style="flex: 1" :chartData="dbxxLevelList"></pieChart>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { addCount } from "@/api/dbxx/statistics";
import CountTo from "vue-count-to";
import LineChartVue from "@/views/dashboard/statisticsLine.vue";
import pieChart from "@/views/dashboard/statisticsPie.vue";
export default {
  name: "Statistics",
  components: {
    CountTo,
    LineChartVue,
    pieChart,
  },
  data() {
    return {
      pieOption: {
        pieData: [
          { value: 320, name: "男" },
          { value: 240, name: "女" },
        ],
      },
      dbxxLevelList: [],
      amount: 0,
      allNumber: 0,
    };
  },
  mounted() {
    addCount().then((res) => {
      this.jointList(res.rows);
    });
  },
  methods: {
    getCountName(item) {
      return (
        item.area +
        `第${item.session}届人民代表大会` +
        `第${item.orderName}次会议` +
        `(${item.annual})`
      );
    },
    jointList(list) {
      list.forEach((item) => {
        if (item.sex == 1 || item.sex == 0) {
          let status = this.dbxxLevelList.findIndex((v) => v.seId == item.seId);
          if (status != -1) {
            this.$set(this.dbxxLevelList, status, {
              seId: item.seId,
              name: this.getCountName(item.tenure),
              man: this.dbxxLevelList[status].man
                ? this.dbxxLevelList[status].man
                : Number(item.num),
              woman: this.dbxxLevelList[status].woman
                ? this.dbxxLevelList[status].woman
                : Number(item.num),
              count: Number(item.num) + this.dbxxLevelList[status].count,
            });
          } else {
            this.dbxxLevelList.push({
              seId: item.seId,
              name: this.getCountName(item.tenure),
              man: item.sex == 0 ? Number(item.num) : 0,
              woman: item.sex == 1 ? Number(item.num) : 0,
              count: Number(item.num),
            });
          }
          this.amount += Number(item.num);
          if (item.tenure.isSession == 1) {
            this.allNumber += Number(item.num);
          }
        } else {
          this.dbxxLevelList.push({
            seId: item.seId,
            name: this.getCountName(item.tenure),
            man: 0,
            woman: 0,
            count: 0,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dbxxStatistics {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: auto;
  &-chunk {
    .chunk {
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1),
        1px -1px 5px rgba(0, 0, 0, 0.1), -1px 1px 5px rgba(0, 0, 0, 0.1),
        -1px -1px 5px rgba(0, 0, 0, 0.1);
      i {
        color: #c11c06;
        font-size: 60px;
      }
      & > div {
        display: flex;
        flex-direction: column;
        span:first-child {
          font-size: 30px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        span:last-child {
          font-size: 16px;
        }
      }
    }
  }
  &-chart {
    width: 100%;
    display: flex;
    gap: 40px;
    margin-top: 30px;
    .chunk-border {
      width: 100%;
      height: 400px;
      display: flex;
      flex-direction: column;
      padding: 15px;
      border: 1px solid #ebeef5;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1),
        1px -1px 5px rgba(0, 0, 0, 0.1), -1px 1px 5px rgba(0, 0, 0, 0.1),
        -1px -1px 5px rgba(0, 0, 0, 0.1);

      p {
        font-size: 20px;
        font-weight: bold;
        margin-left: 30px;
      }
    }
  }
}
</style>
